<template>
  <div>
    <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
      <vue-element-loading :active="isActive" text="架构图正在加载中,请等待" spinner="bar-fade-scale" color="#FF6700"/>
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-expand="onNodeExpand"/>
    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
import axios from "axios"
import VueElementLoading from 'vue-element-loading'

export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph,VueElementLoading },
  data () {
    return {
      g_loading: true,
      demoname: '股权架构图',
      corpDatas: {nodes:[],links:[],rootId:null},
graphOptions:{
"backgrounImage": "",
"backgrounImageNoRepeat": false,
"layouts": [
{
"label": "中心",
"layoutName": "tree",
"layoutClassName": "seeks-layout-center",
"defaultJunctionPoint": "border",
"defaultNodeShape": 0,
"defaultLineShape": 1,
"from": "left",
"min_per_width": "",
"max_per_width": "",
"min_per_height": "",
"max_per_height": ""
}
],
"defaultLineMarker": {
"markerWidth": 12,
"markerHeight": 12,
"refX": 6,
"refY": 6,
"data": "M2,2 L10,6 L2,10 L6,6 L2,2"
},
"defaultNodeColor": "#fff",
"defaultNodeFontColor": "#000",
"defaultNodeBorderColor": "#000",
"defaultNodeBorderWidth": 1,
"defaultNodeShape": 1,
"defaultLineShape": 4,
"defaultJunctionPoint": "lr",
"defaultLineWidth": 2,
"defaultLineColor": "#000",
"defaultNodeHeight": "50",
"defaultNodeWidth": "250",
"isMoveByParentNode": false,
"allowShowMiniNameFilter": true,
"allowShowMiniToolBar": true,
"defaultShowLineLabel": true,
"disableDragNode": false,
"defaultExpandHolderPosition": "hide"
},
      isActive:true
    }
  },
  created () {
    console.log(this.$route.query.key);
    this.getGraphData();
  },
  mounted () {
    this.demoname = this.$route.params.demoname;
  },
  methods: {
    getGraphData () {
    this.isActive=true;
		let _this = this;
		axios.get('https://oa.itgholding.com.cn:443/api/cus/corpStructure/getCorpDatas?key='+this.$route.query.key).then(function (response) {
			_this.corpDatas = response.data.datas
			console.log("JSON==>>> ",response);
			_this.setGraphData();
      this.isActive=false;
		}).catch(function (error) {
			console.log("error is:"+error);
		});
	},
    setGraphData () {
      let graphJsonData = this.corpDatas;

      console.log(this.corpDatas)
      console.log(graphJsonData)
      graphJsonData.nodes.forEach(thisNode => {
      })
      setTimeout(function () {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(Object.assign({},graphJsonData), (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        })
      }.bind(this), 1000)
    },
    onNodeExpand (node, e) {
      // 模拟动态加载数据
      if (node.data && node.data.asyncChild === true && node.data.loaded === false) {
        this.g_loading = true
        node.data.loaded = true
        setTimeout(function () {
          this.g_loading = false
          var newJsonData = {
            nodes: [
              {
                id: node.id + '-child-1',
                text: node.id + '-的子节点1'
              },
              {
                id: node.id + '-child-2',
                text: node.id + '-的子节点2'
              },
              {
                id: node.id + '-child-3',
                text: node.id + '-的子节点3'
              }
            ],
            links: [
              {
                from: node.id,
                to: node.id + '-child-1',
                text: '动态子节点'
              },
              {
                from: node.id,
                to: node.id + '-child-2',
                text: '动态子节点'
              },
              {
                from: node.id,
                to: node.id + '-child-3',
                text: '动态子节点'
              }
            ]
          }
          this.$refs.seeksRelationGraph.appendJsonData(newJsonData, (seeksRGGraph) => {
            // 这些写上当图谱初始化完成后需要执行的代码
          })
        }.bind(this), 1000)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
